<template>
    <div class="comment-management">
        <!-- 搜索表单 -->
        <el-form :inline="true" class="search-form">
            <el-form-item label="帖子标题">
                <el-input v-model="searchParams.title" placeholder="输入帖子标题" clearable />
            </el-form-item>
            <el-form-item label="评论内容">
                <el-input v-model="searchParams.content" placeholder="输入评论内容" clearable />
            </el-form-item>
            <el-form-item label="用户昵称">
                <el-input v-model="searchParams.nickName" placeholder="输入用户昵称" clearable />
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="searchParams.state" placeholder="选择状态" clearable>
                    <el-option label="未审核" :value="0" />
                    <el-option label="审核通过" :value="1" />
                    <el-option label="审核不通过" :value="2" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSearch">搜索</el-button>
                <el-button @click="onReset">重置</el-button>
            </el-form-item>
        </el-form>

        <!-- 评论表格 -->
        <el-table :data="commentList" border>
            <el-table-column prop="title" label="所属帖子" width="200" />
            <el-table-column prop="content" label="评论内容" min-width="300">
                <template #default="{ row }">
                    <div class="content-wrapper">
                        {{ row.content }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="nickName" label="用户昵称" width="120" />
            <el-table-column prop="createTime" label="评论时间" width="180" />
            <el-table-column prop="state" label="状态" width="120">
                <template #default="{ row }">
                    <el-tag :type="getStateTagType(row.state)">
                        {{ getStateText(row.state) }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="200" fixed="right">
                <template #default="{ row }">
                    <el-button v-if="row.state !== 1" type="text" @click="handleApprove(row.commentId)">
                        通过
                    </el-button>
                    <el-button v-if="row.state !== 2" type="text" @click="handleReject(row.commentId)">
                        不通过
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="pagination.pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" />
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
    getCommentListService,
    approveCommentService,
    rejectCommentService
} from '@/apis/comment'

// 搜索参数 - 默认state=0(未审核)
const searchParams = reactive({
    title: '',
    content: '',
    nickName: '',
    state: 1
})

// 分页参数
const pagination = reactive({
    pageNum: 1,
    pageSize: 10,
    total: 0
})

// 评论列表数据
const commentList = ref([])

/**
 * 获取评论列表
 */
const fetchComments = async () => {
    try {
        const res = await getCommentListService({
            title: searchParams.title,
            content: searchParams.content,
            nickName: searchParams.nickName,
            state: searchParams.state,
            pageNum: pagination.pageNum,
            pageSize: pagination.pageSize
        })
        commentList.value = res.rows
        pagination.total = res.total
    } catch (error) {
        ElMessage.error('获取评论列表失败: ' + (error.response?.data?.message || error.message))
        console.error('获取评论列表错误:', error)
    }
}

/**
 * 获取状态文本
 */
const getStateText = (state) => {
    const stateMap = {
        0: '未审核',
        1: '审核通过',
        2: '审核不通过'
    }
    return stateMap[state] || '未知'
}

/**
 * 获取状态标签类型
 */
const getStateTagType = (state) => {
    const typeMap = {
        0: 'warning',
        1: 'success',
        2: 'danger'
    }
    return typeMap[state] || ''
}

/**
 * 审核通过评论
 */
const handleApprove = async (commentId) => {
    try {
        await ElMessageBox.confirm('确定通过该评论吗?', '提示', {
            type: 'warning'
        })
        await approveCommentService(commentId)
        ElMessage.success('操作成功')
        fetchComments() // 刷新列表
    } catch (error) {
        if (error !== 'cancel') {
            ElMessage.error('操作失败: ' + (error.response?.data?.message || error.message))
        }
    }
}

/**
 * 审核不通过评论
 */
const handleReject = async (commentId) => {
    try {
        await ElMessageBox.confirm('确定不通过该评论吗?', '提示', {
            type: 'warning'
        })
        await rejectCommentService(commentId)
        ElMessage.success('操作成功')
        fetchComments() // 刷新列表
    } catch (error) {
        if (error !== 'cancel') {
            ElMessage.error('操作失败: ' + (error.response?.data?.message || error.message))
        }
    }
}

/**
 * 分页大小变化
 */
const handleSizeChange = (val) => {
    pagination.pageSize = val
    pagination.pageNum = 1
    fetchComments()
}

/**
 * 当前页码变化
 */
const handleCurrentChange = (val) => {
    pagination.pageNum = val
    fetchComments()
}

/**
 * 搜索
 */
const onSearch = () => {
    pagination.pageNum = 1
    fetchComments()
}

/**
 * 重置
 */
const onReset = () => {
    searchParams.title = ''
    searchParams.content = ''
    searchParams.nickName = ''
    searchParams.state = 0 // 重置为查询未审核状态
    pagination.pageNum = 1
    fetchComments()
}

// 初始化加载未审核评论
onMounted(() => {
    fetchComments()
})
</script>

<style scoped>
.comment-management {
    padding: 20px;
}

.search-form {
    margin-bottom: 20px;
}

.content-wrapper {
    max-height: 100px;
    overflow-y: auto;
    word-break: break-word;
}

.el-table {
    margin-bottom: 20px;
}
</style>